<template>
	<view class="msg flex flex-col">
		<NavBarVue title="消息" :leftIcon="false"></NavBarVue>
		<view class="flex-1 flex flex-col overflow-hidden px-30">
			<view class="msg-tablist bg-gradient-to-b from-[#D0EEFF] to-[#FFFFFF] rounded-lg p-20">
				<ImageBoxVue src="/static/msg/msg_title.png" width="132rpx" height="39rpx"></ImageBoxVue>
				<scroll-view scroll-x class="mt-20">
					<view class="flex">
						<UserVue type="msg" class="mr-20" v-for="e,i in userList" :key="i" :val="e"></UserVue>
					</view>
				</scroll-view>
			</view>
			<scroll-view scroll-y="true" class="msg-content" refresher-enabled="true"
				@refresherrefresh="getConversationList" :refresher-triggered="triggered">
				<uni-swipe-action>
					<uni-swipe-action-item v-for="e,i in msgList" :key="i">
						<view class="msg-item flex" @click="GoChatRoom(e)">
							<view class="item-left">
								<ImageBoxVue :src="e.headimg" width="100rpx" height="100rpx"></ImageBoxVue>
							</view>
							<view class="item-right flex-1 flex flex-col justify-around">
								<view class="flex justify-between">
									<text class="f-s-28 c-333 bold">{{ e.nickname }}</text>
									<text
										class="f-s-24 c-999">{{ dayjs(e.lastMessage.lastTime*1000).format('YYYY-MM-DD HH:mm') }}</text>
								</view>
								<view class="flex justify-between">
									<text class="f-s-24 c-666"
										v-if="e.lastMessage.type=='TIMTextElem'">{{ e.lastMessage.messageForShow }}</text>
									<text class="f-s-24 c-666"
										v-if="e.lastMessage.type=='TIMCustomElem'">[{{ msgType[e.lastMessage.payload.data] }}]</text>
									<text class="no-read" v-if="e.unreadCount>0">{{ e.unreadCount }}</text>
								</view>
							</view>
						</view>
						<template v-slot:right>
							<view class="h-full p-20 flex items-center" style="background-color: #FF0000;"
								@click="onDel(e.conversationID)">
								<text class="text-white">删除</text>
							</view>
						</template>
					</uni-swipe-action-item>
				</uni-swipe-action>
				<view class="flex justify-center items-center p-7" v-if="msgList.length==0">
					<text>暂无数据</text>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
	import {
		nextTick,
		onMounted,
		ref
	} from 'vue';
	import {
		onShow,
		onHide
	} from '@dcloudio/uni-app';
	import liveApi from '@/apis/apiList/liveApi';
	import userApi from '@/apis/apiList/userApi';
	import UserVue from '@/components/User.vue';
	import TencentCloudChat from '@tencentcloud/chat';
	import {
		tim
	} from "@/apis/IM.js"
	import dayjs from "dayjs"
	const userList = ref([])
	const msgList = ref([])
	const triggered = ref(false)
	const msgType = {
		audio: "语音",
		img: "图片",
		astrolabe: "星盘",
		phone: "私麦通话",
		unPhone: '私麦通话结束',
		outRoom: '私麦通话结束',
		gift: '礼物',
		answer: '邀请解读'
	}
	const chaton = () => {
		// 监听会话列表
		tim.on(TencentCloudChat.EVENT.CONVERSATION_LIST_UPDATED, getMsg);

	}
	const getMemberListAtstrArry = (e) => {
		const ids = e.data.map(a => {
			return a.userProfile.userID
		})
		if (ids.length == 0) {
			return
		}
		const params = {
			code: ids.join(',')
		}
		userApi.getMemberListAtstrArry(params).then(res => {
			let userObj = {}
			res.data.forEach(a => {
				userObj[a.id] = {
					headimg: a.headimg,
					nickname: a.nickname,
				}
			})
			msgList.value = e.data.map(a => {
				return {
					...a,
					...userObj[a.userProfile.userID]
				}
			})
			console.log('列表', msgList.value);
			setTimeout(() => {
				triggered.value = false
			}, 1000)
		})
	}
	const getConversationList = () => {
		triggered.value = true
		tim.getConversationList().then(function(imResponse) {
			console.log('获取', imResponse.data.conversationList);
			if (imResponse.data.conversationList.length > 0) getMemberListAtstrArry({
				data: imResponse.data.conversationList
			})
			else triggered.value = false
		}).catch(function(imError) {
			console.warn('getConversationList error:', imError); // 获取会话列表失败的相关信息
		});
	}
	const getMsg = (e) => {
		console.log('监听', e);
		if (e.data.length > 0) getMemberListAtstrArry(e)
		else triggered.value = false
	}
	// 获取入住师
	const getisrecAnchorlist = () => {
		liveApi.getisrecAnchorlist().then(res => {
			userList.value = res.data
		})
	}
	// 进入聊天室
	const GoChatRoom = (e) => {
		uni.navigateTo({
			url: `/pages/msg/chatRoom?&conversationID=${e.conversationID}&fromAccount=${e.userProfile.userID}&nickname=${e.nickname}&headimg=${e.headimg}`
		})
	}
	onShow(() => {
		getisrecAnchorlist()
		getConversationList()
	})
</script>

<style lang="scss" scoped>
	.msg {
		height: calc(100vh - 4rpx);

		.msg-tablist {
			height: 262rpx;
		}

		.msg-content {
			width: 100%;
			height: calc(100% - 292rpx);
			margin-top: 30rpx;
			border-radius: 20rpx;
			background-color: #fff;

			.msg-item {
				margin: 20rpx;

				.item-left {
					width: 100rpx;
					height: 100rpx;
					overflow: hidden;
					border-radius: 50%;
					margin-right: 20rpx;
				}
			}
		}
	}
</style>